<cnsl-create-layout
  title="{{ 'ORG.PAGES.CREATE' | translate }}"
  [createSteps]="createSteps"
  [currentCreateStep]="currentCreateStep"
  (closed)="close()"
>
  <div class="org-create-main-content">
    <ng-template cnslHasRole [hasRole]="['iam.write']">
      <mat-slide-toggle
        [disabled]="currentCreateStep !== 1"
        class="example-margin"
        color="primary"
        (change)="changeSelf($event)"
        [(ngModel)]="forSelf"
      >
        {{ 'ORG.PAGES.USERSELFACCOUNT' | translate }}
      </mat-slide-toggle>

      <ng-container *ngIf="!forSelf">
        <ng-container *ngIf="currentCreateStep === 1">
          <h1>{{ 'ORG.PAGES.ORGDETAIL_TITLE' | translate }}</h1>

          <form [formGroup]="orgForm" (ngSubmit)="next()">
            <div class="content">
              <cnsl-form-field class="formfield">
                <cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
                <input cnslInput formControlName="name" />
              </cnsl-form-field>
              <cnsl-form-field class="formfield">
                <cnsl-label>{{ 'ORG_DETAIL.DETAIL.DOMAIN' | translate }}</cnsl-label>
                <input cnslInput formControlName="domain" />
              </cnsl-form-field>
            </div>

            <div class="org-create-btn-container">
              <button
                [disabled]="orgForm.invalid"
                color="primary"
                mat-raised-button
                class="big-button"
                cdkFocusInitial
                type="submit"
              >
                {{ 'ACTIONS.CONTINUE' | translate }}
              </button>
            </div>
          </form>
        </ng-container>

        <ng-container *ngIf="currentCreateStep === createSteps">
          <h1>{{ 'ORG.PAGES.ORGDETAILUSER_TITLE' | translate }}</h1>

          <div class="user">
            <form [formGroup]="userForm" *ngIf="userForm" class="form">
              <div class="content">
                <p class="section cnsl-secondary-text">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
                <cnsl-form-field class="formfield">
                  <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
                  <input cnslInput formControlName="userName" required />
                </cnsl-form-field>
                <cnsl-form-field class="formfield">
                  <cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
                  <input cnslInput formControlName="email" required />
                </cnsl-form-field>
                <cnsl-form-field class="formfield">
                  <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
                  <input cnslInput formControlName="firstName" required />
                </cnsl-form-field>
                <cnsl-form-field class="formfield">
                  <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
                  <input cnslInput formControlName="lastName" required />
                </cnsl-form-field>
                <cnsl-form-field class="formfield">
                  <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
                  <input cnslInput formControlName="nickName" />
                </cnsl-form-field>

                <p class="section cnsl-secondary-text">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>

                <cnsl-form-field class="formfield">
                  <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
                  <mat-select formControlName="gender">
                    <mat-option *ngFor="let gender of genders" [value]="gender">
                      {{ 'GENDERS.' + gender | translate }}
                    </mat-option>
                  </mat-select>
                </cnsl-form-field>
                <cnsl-form-field class="formfield">
                  <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
                  <mat-select formControlName="preferredLanguage">
                    <mat-option *ngFor="let language of langSvc.supported$ | async" [value]="language">
                      {{ 'LANGUAGES.' + language | translate }}
                    </mat-option>
                  </mat-select>
                </cnsl-form-field>

                <div class="email-is-verified">
                  <mat-checkbox class="block-checkbox" formControlName="isVerified">
                    {{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
                  </mat-checkbox>

                  <mat-checkbox
                    class="block-checkbox"
                    [(ngModel)]="usePassword"
                    [ngModelOptions]="{ standalone: true }"
                    (change)="initPwdValidators()"
                  >
                    {{ 'ORG.PAGES.USEPASSWORD' | translate }}</mat-checkbox
                  >
                  <cnsl-info-section class="full-width desc">
                    <span>{{ 'USER.CREATE.INITMAILDESCRIPTION' | translate }}</span>
                  </cnsl-info-section>
                </div>

                <ng-container *ngIf="usePassword && pwdForm">
                  <p class="section cnsl-secondary-text">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>

                  <cnsl-password-complexity-view
                    *ngIf="policy"
                    class="complexity-view"
                    [policy]="policy"
                    [password]="password"
                  >
                  </cnsl-password-complexity-view>

                  <form [formGroup]="pwdForm" class="pwd-form">
                    <cnsl-form-field class="pwd" *ngIf="password">
                      <cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
                      <input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
                    </cnsl-form-field>
                    <cnsl-form-field class="pwd" *ngIf="confirmPassword">
                      <cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
                      <input
                        cnslInput
                        autocomplete="off"
                        name="confirmPassword"
                        formControlName="confirmPassword"
                        type="password"
                      />
                    </cnsl-form-field>
                  </form>
                </ng-container>
              </div>
              <div class="org-create-btn-container">
                <button color="primary" class="small-button" type="button" (click)="previous()" mat-stroked-button>
                  {{ 'ACTIONS.BACK' | translate }}
                </button>
                <span class="fill-space"></span>
                <button
                  color="primary"
                  class="big-button"
                  (click)="finish()"
                  [disabled]="orgForm.invalid || userForm.invalid || (usePassword && pwdForm ? pwdForm.invalid : false)"
                  mat-raised-button
                >
                  {{ 'ACTIONS.FINISH' | translate }}
                </button>
              </div>
            </form>
          </div>
        </ng-container>
      </ng-container>
    </ng-template>
    <ng-template cnslHasRole [hasRole]="['org.create']">
      <div *ngIf="forSelf">
        <ng-container *ngIf="currentCreateStep === 1">
          <h1>{{ 'ORG.PAGES.ORGDETAIL_TITLE_WITHOUT_DOMAIN' | translate }}</h1>

          <form [formGroup]="orgForm" (ngSubmit)="createOrgForSelf()">
            <div class="content">
              <cnsl-form-field class="formfield">
                <cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
                <input cnslInput formControlName="name" data-e2e="org-name-input" />
              </cnsl-form-field>
            </div>

            <div class="org-create-btn-container">
              <button
                [disabled]="orgForm.invalid"
                color="primary"
                mat-raised-button
                class="big-button"
                cdkFocusInitial
                type="submit"
                data-e2e="create-org-button"
              >
                {{ 'ACTIONS.CREATE' | translate }}
              </button>
            </div>
          </form>
        </ng-container>
      </div>
    </ng-template>
  </div>
</cnsl-create-layout>
